// 购物车的显示隐藏

const gw = document.querySelector("#gouwu");
console.log(gw);
const oShop = document.querySelector("#shop");
gw.onmouseenter=()=>{
    oShop.style.display="block";
}
gw.onmouseleave=()=>{
    oShop.style.display="none";
}
// 下拉菜单
const oa1=document.querySelector(".nav-l1");
const oNav1=document.querySelector(".nav-bottom-1");
oa1.onmouseenter=()=>{
    oNav1.style.opacity=1;
}
oNav1.onmouseleave=()=>{
    oNav1.style.opacity="0";
}
// const oa2=document.querySelector(".nav-l2");
// const oNav2=document.querySelector(".nav-bottom-2");
// oa2.onmouseenter=()=>{
//     oNav2.style.opacity=1;
// }
// oa2.onmouseleave=()=>{
//     oNav2.style.opacity="0";
// }
// const oa3=document.querySelector(".nav-l3");
// const oNav3=document.querySelector(".nav-bottom-3");
// oa3.onmouseenter=()=>{
//     oNav3.style.opacity=1;
// }
// oa3.onmouseleave=()=>{
//     oNav3.style.opacity="0";
// }
// const oa4=document.querySelector(".nav-l4");
// const oNav4=document.querySelector(".nav-bottom-4");
// oa4.onmouseenter=()=>{
//     oNav4.style.opacity=1;
// }
// oa4.onmouseleave=()=>{
//     oNav4.style.opacity="0";
// }
const oa5=document.querySelector(".nav-l5");
const oNav5=document.querySelector(".nav-bottom-5");
oa5.onmouseenter=()=>{
    oNav5.style.opacity=1;
}
oNav5.onmouseleave=()=>{
    oNav5.style.opacity="0";
}

// 轮播图
function Banner(ops){//构造函数
    this.imgli = ops.imgli;
    this.ol = ops.ol;
    this.left = ops.left;
    this.right = ops.right;
    this.bannerbox = ops.bannerbox;
    this.index = 0; //当前索引
    this.lastindex = 0; //上一个索引
    this.t = null; //定时器标志
    this.init();
    this.addEvent();
    this.forword();
}
Banner.prototype.init = function(){//初始化页面 小列表元素根据图片的多少来添加
    for(let i = 0; i < this.imgli.length; i++) {
        let oli = document.createElement("li");
        // oli.innerHTML = i;
        this.ol.appendChild(oli);
    }
    this.ol.children[0].classList.add("active"); //给第一个设置类名
}
Banner.prototype.addEvent = function() {//添加事件
    const that = this;
    this.left.onclick = function() {//左点击事件
        that.computedIndex("left"); //传入参数以便判断
    }
    this.right.onclick = function() {//右点击事件
        that.computedIndex("right");
    }
    for(let i = 0; i < this.ol.children.length; i++){
        this.ol.children[i].onclick = function(){//小列表点击事件
            that.lastindex = that.index;//当前下标赋值给lastindex
            that.index = i;//当前点击的小列表的索引赋值给需要计算的索引
            that.change();//执行修改类名函数
        }
    }
}
Banner.prototype.forword = function() {//自动播放
    const that = this;
    if(this.t){
        clearInterval(this.t);//如果定时器存在就清除一次防止多次定时器运行
    }else {
        this.t = setInterval(()=>{
            that.right.onclick();//开启定时器让它每隔500自动执行点击的函数
        },1500)
    }
    this.bannerbox.onmouseenter = function(){//移入事件停止移动
        clearInterval(that.t);
    }
    this.bannerbox.onmouseleave = function(){//移出事件开启移动
        that.t = setInterval(()=>{
            that.right.onclick();
        },3000)
    }
}
Banner.prototype.computedIndex = function(f) {//判断下标
    if(f == "left"){
        this.lastindex = this.index;//当前下标赋值给lastindex
        if(this.index == 0) {
            this.index = this.imgli.length-1;//如果为0直接等于到最后一张的下标
        }else{
            this.index--;//下标递减
        }
        this.change();//执行修改类名函数
    }else{ 
        this.lastindex = this.index;
        if(this.index == this.imgli.length-1) {
            this.index = 0;
        }else{
            this.index++;
        }
        this.change();
    }
}
Banner.prototype.change = function() {
    this.imgli[this.lastindex].classList.remove("active");//移除上一个索引的类名
    this.imgli[this.index].classList.add("active");//给当前索引添加类名
    this.ol.children[this.lastindex].classList.remove("active");//移除上一个索引的类名
    this.ol.children[this.index].classList.add("active");//给当前索引添加类名

}
var a = new Banner({//实例化传入对象参数
     imgli : document.querySelectorAll(".banner img"),//所有包裹img的li
     ol : document.querySelector(".banner-dian ul"),//小列表的ol
     left : document.querySelector(".btn-left"),//左按键
     right : document.querySelector(".btn-right"),//右按键
     bannerbox : document.querySelector("#banner")//整个大盒子
});


// 回到顶部
class ToTop{
    constructor(ops){
        this.aside = ops.aside;
        this.scrolltop = ops.scrolltop;
        // console.log();
        this.scroll();
        this.t = null;
    }
    scroll(){
        document.onscroll = ()=>{
            let dT = document.documentElement.scrollTop;
            let sT = this.scrolltop.offsetTop;
            if(dT > sT){
                this.aside.style.display = "block";
                this.aside.style.opacity = 1; 
            }else{
                this.aside.style.display = "none";
                this.aside.style.opacity = 0;
            }
        }
        this.aside.onclick = ()=>{
            console.log(1);
            clearInterval(this.t)
            this.t=setInterval(()=>{
                document.documentElement.scrollTop -=100;
                console.log(document.documentElement.scrollTop);
                if(document.documentElement.scrollTop ==0){
                    clearInterval(this.t)
                }
            },30)
        }
    }
}
let totop = new ToTop({
    aside:document.querySelector("#aside .aside-6"),
    scrolltop:document.querySelector("#banner")
});





// 楼层
function scroll() { 
    // 开始封装自己的scrollTop
    if(window.pageYOffset !== undefined) { 
     // ie9+ 高版本浏览器
     // 因为 window.pageYOffset 默认的是0,所以需要判断
     return {
      left: window.pageXOffset,
      top: window.pageYOffset
     }
    }
    else if(document.compatMode === "CSS1Compat") {
     // 标准浏览器,来判断有没有声明DTD
     return {
      left: document.documentElement.scrollLeft,
      top: document.documentElement.scrollTop
     }
    }
    return {
     // 未声明 DTD
     left: document.body.scrollLeft,
     top: document.body.scrollTop
    }
   }   